<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>充值VIP</title>
    <link rel="stylesheet" href="../style/publick.css" />
    <link rel="stylesheet" href="../style/VIP.css" />
  </head>
  <body>
    <div class="vip-container">
      <!-- headInfo -->
      <div class="vip-header">
        <div class="vip-head-logo">
          <div class="vip-User-Logo">
            <img src="../static/img/logo/headlogo (4).jpg" alt="" />
          </div>
      
          <div class="vip-logo">
            <svg
              t="1718207555594"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2735"
              width="128"
              height="128"
            >
              <path
                d="M401.066667 426.666667h264.533333l-98.133333-170.666667h-68.266667l-98.133333 170.666667z m4.266666 42.666666l128 324.266667 128-324.266667h-256z m452.266667-42.666666l-123.733333-170.666667h-119.466667l98.133333 170.666667h145.066667z m21.333333 42.666666h-170.666666l-123.733334 311.466667 294.4-311.466667zM209.066667 426.666667h140.8l98.133333-170.666667H332.8l-123.733333 170.666667z m-21.333334 42.666666l294.4 311.466667L362.666667 469.333333H187.733333z m345.6 426.666667L128 465.066667 307.2 213.333333h448l179.2 251.733334L533.333333 896z"
                fill="#ffffff"
                p-id="2736"
              ></path>
            </svg>
          </div>
          <div class="Maturity">到期时间2024年10月11日</div>
        </div>

        <!-- 取消按钮 -->
        <div class="cancel">
          <svg
            t="1718207738882"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5708"
            width="128"
            height="128"
          >
            <path
              d="M512.890466 565.998737c54.397912 54.352756 108.799436 108.694675 163.208185 163.034787 15.018715 15.000653 39.375584 15.000653 54.399717 0 15.015102-15.013296 15.015102-39.33946 0-54.338306-54.399718-54.341919-108.808467-108.694675-163.20999-163.034787 54.401524-54.340113 108.810273-108.680225 163.20999-163.022144 15.015102-14.998846 15.015102-39.337654 0-54.338306-15.024133-15.01149-39.381003-15.01149-54.399717 0-54.408749 54.338306-108.810273 108.680225-163.208185 163.020337l-163.200959-163.020337c-15.02594-15.01149-39.381003-15.01149-54.397912 0-15.02594 15.000653-15.02594 39.33946 0 54.338306l163.199153 163.022144c-54.397912 54.338306-108.799436 108.692869-163.199153 163.034787-15.02594 14.998846-15.02594 39.32501 0 54.338306 15.016909 15.000653 39.371972 15.000653 54.397912 0 54.401524-54.341919 108.799436-108.683838 163.200959-163.034787z"
              fill="#ffffff"
              p-id="5709"
            ></path>
          </svg>
        </div>
      </div>

      <div class="vip-body">
        <div class="vip-select active">
          <div class="discount red">4.5折特惠</div>
          <div class="vip-pirce">
            <p class="title">连续包月</p>
            <p class="price">￥38</p>
            <p class="month">次月续费28</p>
          </div>
        </div>

        <div class="vip-select">
          <div class="discount">新用户专享</div>
          <div class="vip-pirce">
            <p class="title">连续包季</p>
            <p class="price">￥68</p>
            <p class="month">次季续费48</p>
          </div>
        </div>

        <div class="vip-select">
          <div class="discount">超值特惠</div>
          <div class="vip-pirce">
            <p class="title">连续年度</p>
            <p class="price">￥168</p>
            <p class="month">次年续费148</p>
          </div>
        </div>

      </div>

      <div class="vip-player">
        <div class="player-code">
          <img src="../static/img/二维码@3x.png" alt="">
        </div>
        <div class="player-tips">
          <p class="player-price">
            ￥38
          </p>
          <div class="player-methods">
            <img src="../static/img/支付宝.png" alt="">
            <img src="../static/img/微信.png" alt="">
          </div>
          <p class="player-tips-text">请使用支付宝/微信扫一扫，轻松支付！</p>
        </div>
        <div class="player-right">
          <img src="../static//img/常用@3x.png" alt="">
        </div>
      </div>
      
    </div>
  </body>
  <script src="../js/VIP.js"></script>
</html>
